/
<template>
  <div class="wraper">
    <div class="left">
      <van-sidebar v-model="activeKey" @change="check_children_data">
        <van-sidebar-item
          v-for="item in data"
          :key="item.id"
          :title="item.title"
        />
      </van-sidebar>
    </div>
    <div class="right">
      <div class="content">
        <van-grid :border="false" :column-num="2">
          <van-grid-item
            @click="gotoDetails(item, this)"
            v-for="(item, index) in children_Data"
            :key="index"
          >
            <p>{{ item.title }}</p>
            <van-image :src="item.img" />
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "@/utils/index";
import BetterScroll from "better-scroll";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "home",
  data() {
    return {
      activeKey: 0,
      bs: null,
    };
  },
  computed: {
    ...mapState("reducer", ["data", "children_Data"]),
  },

  mounted() {
    console.log(_);
    // console.log(this.$data, this.$el);
    this.get_list();
    this.bs = new BetterScroll(".right", {
      movable: true,
      zoom: true,
      click: true,
      pullUpLoad: true,
      pullDownRefresh: true,
    });
    this.bs.on("pullingUp", this.addData); // 上拉加载
    this.bs.on("pullingDown", this.reload); // 下�
  },
  methods: {
    ...mapActions("reducer", ["get_list", "add_list"]),
    ...mapMutations("reducer", ["set_children_Data"]),
    gotoDetails: _.debounce(3000, function (item) {
      this.$router.push({
        path: "/details",
        query: {
          item: item,
        },
      });
    }),

    check_children_data(index) {
      this.set_children_Data(index);
    },
    addData() {
      console.log("上拉加载");
      this.add_list();
      this.bs.finishPullUp();
      this.bs.refresh();
    },
    reload() {
      console.log("刷新");
      // 刷新页面
      window.location.reload();
      this.get_list();
      this.bs.finishPullDown();
    },
  },
};
</script>

<style lang="scss">
.wraper {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>
